<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>中午去哪吃</title>
    <style type="text/css">
        table{
            width:500px;
            height:500px;
            margin:0 auto;
            text-align:center;
        }
        td{
            border:1px solid #900;
        }
        .buttoncss {
            background-color: #008CBA; /* Blue */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
        }
    </style>
</head>

<body>
<table>
    <tr><td id="r0" class="gif_icon gif_0">嘉好</td><td id="r1" class="gif_icon gif_1">北科二楼</td><td id="r2" class="gif_icon gif_2">潮客</td></tr>
    <tr><td id="r7" class="gif_icon gif_7">翰南馆</td><td><button id="start" class="buttoncss">点击开始选餐厅</button></td><td id="r3" class="gif_icon gif_3">金嘉味</td></tr>
    <tr><td id="r6" class="gif_icon gif_6">壹家壹品</td><td id="r5" class="gif_icon gif_5">Pizza Square</td><td id="r4" class="gif_icon gif_4">韩食先生</td></tr>
</table>
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        var drawTimer=null;
        var drawStep=-1;
        var easeTime=2; //缓动计时
        var stopPosition=1;

        $('#start').click(function(){
            stopPosition=Math.floor(Math.random()*8+1); //获取一个1到8之间的整数
            drawTimer=setTimeout(startRoll,easeTime*100);
        });
        function startRoll(){   //开始滚动
            if(drawStep >= ( 40+stopPosition ) ){
                $('.gif_'+(drawStep % 8)).css('background','#02ff4b');
                drawStep=stopPosition;
                easeTime=2;
                resultPrint(drawStep);
                clearTimeout(drawTimer);
                return;
            }
            if(drawStep>=( 36+stopPosition )){
                easeTime+=1; //滚动变慢到停止滚动效果
            }else{
                if(easeTime<=2){
                    easeTime=2;
                }
                easeTime --;
            }
            drawStep++;
            $('.gif_icon').each(function(index){ //设置默认颜色
                $(this).css('background','#fff');
            });
            $('.gif_'+(drawStep % 8)).css('background','#02ff4b'); //滚动样式渲染
            drawTimer=setTimeout(startRoll,easeTime*70);
        }

        function resultPrint(rest){
            var restname = document.getElementById("r"+rest).innerText;
            var result = "自己选的"+restname+"，不要反悔";
            alert(result);
        }
    })
</script>
</body>
</html>